<template>
  <div class="checkbox">
    <label class="checkbox-label">
      <span class="check-title">{{ title1 }}</span>
      <input
        class="checkbox-input"
        type="checkbox"
        :value="title1"
        v-model="checked"
        @click="click"
      />
    </label>
    <label class="checkbox-label">
      <span class="check-title">{{ title2 }}</span>
      <input
        class="checkbox-input"
        type="checkbox"
        :value="title2"
        v-model="checked"
        @click="click"
      />
    </label>
  </div>
</template>

<script>
export default {
  name: "SanpCheckBox",
  data() {
    return {
      title1: "优秀",
      title2: "良好",
    };
  },
  methods: {
    click(e) {
      console.log(e.target.value);
    },
  },
};
</script>

<style scoped>
.checkbox-label {
  padding: 10px 20px;
  display: flex;
  align-items: center;
}
.checkbox-input {
  margin: 0 10px;
  width: 25px;
  height: 25px;
}
</style>
